import Taro , { Component } from '@tarojs/taro';
import { View, Text , Button} from '@tarojs/components';
import './index.scss';
import { userLowerAgent, topAgent } from '../../../services/user';
import NavigationBar from '../../../components/navigationBar/index';

export default class Index extends Component {

   config = {
       navigationBarTitleText: '选择代理商'
  }

  state = {
    userInfo: Taro.getStorageSync('userInfo'),
    list: [],
    pageData: {
      page: 1,
      page_number: 10,
    },
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
  }

  componentWillMount () {
    topAgent({
      // id: this.state.userInfo.id,
      ...this.state.pageData,
    }).then(res => {
      this.setState({
        list: res.list
      })
    })
  }
  componentDidMount () {}
  componentWillReceiveProps (nextProps,nextContext) {}
  componentWillUnmount () {}
  componentDidShow () {}
  componentDidHide () {}
  componentDidCatchError () {}
  componentDidNotFound () {}

  choose(agencyId) {
    Taro.navigateTo({
      url: `/subPackageWork/pages/output/index?id=${agencyId}`
    })
  }


  render() {
    const { list } = this.state;
    return (
      <View className="wrapper" style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text="选择代理商" />
         { list.map(item => {
            return <View className="item" key={item.id}>
              <Image className="avatar" src={item.avatar} />
              <View className="info">
                <View className="name">{item.nickname}</View>
                <View className="tel">{item.mobile}</View>
              </View>
              <View className="btn" onClick={this.choose.bind(this, item.id)}>选择</View>
            </View>
          })
         }
      </View>
    );
  }
}
